<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
		*{padding:0;margin:0;}
		#did{
			width:400px;
			height:400px;
			/*border:1px solid red;*/
		}
		#did img{
			width:400px;
			height:400px;
		}
		#mouse{
			position:absolute;
			left:0;
			top:0;
			width:100px;
			height:100px;
			background-color:blue;
			opacity:0.5;
			display:none;
		}
		#big{
			position:absolute;
			left:410px;
			top:0;
			width:400px;
			height:400px;
			/*border:1px solid green;*/
			overflow:hidden;
			display:none
		}
		#bimg{
			position:absolute;
			left:0;
			top:0;
			width:1600px;
			height:1600px;
		}
		#list{
			list-style:none;
			margin-left:20px;
		}
		#list li{
			float:left;
			margin:5px;
		}
		#list li img{
			border:1px solid red;
			padding:3px;
			width:100px;
			height:100px;
		}
	</style>
</head>
<body>
	<div id="did" >
		<img src="./image/2.jpg" id="reset" >
		<div id="mouse" ></div>
	</div>
	<div id="big" >
		<img src="./image/2.jpg" id="bimg" >
	</div>
	<ul id="list" >
		<li><img src="./image/2.jpg" ></li>
		<li><img src="./image/3.jpg" ></li>
		<li><img src="./image/4.jpg" ></li>
	</ul>
</body>
	<script>
		did = document.getElementById("did");
		reset = document.getElementById("reset");
		mouse = document.getElementById("mouse");
		big = document.getElementById("big");
		bimg = document.getElementById("bimg");

		did.onmouseover=function(){
			mouse.style.display="block";
			big.style.display="block";
		}

		did.onmousemove=function(e){
			ee = e||window.event;
			x = ee.clientX;
			y = ee.clientY;

			didL = did.offsetLeft;
			didT = did.offsetTop;

			mW = mouse.offsetWidth;
			mH = mouse.offsetHeight;

			x1 = x-didL-mW/2;
			y1 = y-didT-mH/2;

			if(x1<0){
				x1=0;
			}
			if(x1>did.offsetWidth-mW){
				x1 = did.offsetWidth-mW;
			}
			if(y1<0){
				y1=0;
			}
			if(y1>did.offsetHeight-mH){
				y1 = did.offsetHeight-mH;
			}


			mouse.style.left = x1+"px";
			mouse.style.top = y1+"px";

			bimg.style.left = -x1*4+"px";
			bimg.style.top = -y1*4+"px";

		}

		did.onmouseout=function(){
			mouse.style.display="none";
			big.style.display="none";
		}

		list = document.getElementById("list").getElementsByTagName("img");

		for(var i=0;i<list.length;i++){
			list[i].onmouseover=function(){
				reset.setAttribute("src",this.src);
				bimg.setAttribute("src",this.src);
				this.style.border="1px solid green";
			}
			list[i].onmouseout=function(){
				this.style.border="1px solid red";
			}
		}


	</script>
</html>